<!--  -->
<template>
    <div id="c1">

    </div>
</template>

<script>
import G2 from "@antv/g2";
export default {
    data () {
        return {
        };
    },

    components: {},

    computed: {},

    mounted(){
        const data = [
            { value: 10, time: '2015-03-01T16:00:00.000Z' },
            { value: 15, time: '2015-03-01T16:10:00.000Z' },
            { value: 26, time: '2015-03-01T16:20:00.000Z' },
            { value: 9, time: '2015-03-01T16:30:00.000Z' },
            { value: 12, time: '2015-03-01T16:40:00.000Z' },
            { value: 23, time: '2015-03-01T16:50:00.000Z' },
            { value: 18, time: '2015-03-01T17:00:00.000Z' },
            { value: 21, time: '2015-03-01T17:10:00.000Z' },
            { value: 22, time: '2015-03-01T17:20:00.000Z' }
        ];
        const chart = new G2.Chart({
            container : 'c1',
            forceFit: true,
            height : 300
        });
        chart.source(data, {
            'time': {
                type: 'time',
                nice: false,
                mask: 'HH:mm'
            },
            'value': {
                formatter: val => {
                    return val + ' k';
                }
            }
        });
        chart.line().position('time*value').color('value',(cValue) => {
            if(cValue >15){
                return 'red';
            }
            return 'green';
        }).size(2);
        chart.render();

    },

    methods: {}
}

</script>
<style lang='less' scoped>
</style>